<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="div1">
			<p id="p1">这是一个段落。</p>
			<p id="p2">这是另外一个段落。</p>
		</div>
		<button type="button" onclick="changeElemnt()">替换p1</button>
		<script>
			function changeElemnt(){
				var newElementP=document.createElement("p");//创建一个新的段落元素
				var text=document.createTextNode("这是我新创建的段落p");//新创建的文本节点
				//将文本的节点添加到新创建的元素中
				newElementP.appendChild(text);
				//获取要被替换的元素p1及其父元素div
				var div=document.getElementById("div1");
				var p1=document.getElementById("p1");
				//将div中的元素p1替换为新创建的元素
				div.replaceChild(newElementP,p1);
			}
		</script>
	</body>
</html>
